/* SCROLLBAR */

[dark-scroll]::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

[dark-scroll]::-webkit-scrollbar-track-piece {
  background-color: #2b2b2b;
  border: 1px solid #1d1d1d;
}

[dark-scroll]::-webkit-scrollbar-thumb {
  height: 10px;
  background-color: #4d4d4d;
}

[dark-scroll]::-webkit-scrollbar-thumb:hover {
  background-color: #5a5a5a;
}

/* GROUPING */

[data-id].ui-selecting {
  box-shadow: inset 0 0 0 1px #4285f4 !important;
}

[data-id].ui-selected {
  box-shadow: inset 0 0 0 1px #4285f4 !important;
}

.screen textarea:focus,
.screen input:focus {
  outline: none;
}

.screen * {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.screen div {
  -webkit-text-size-adjust: none;
}

.screen a {
  display: contents;
  text-decoration: none;
}

.full-width-a {
  width: 100%;
}

.full-height-a {
  height: 100%;
}

.container-center-vertical {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 100%;
  pointer-events: none;
}

.container-center-vertical>* {
  flex-shrink: 0;
  pointer-events: auto;
}

.container-center-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  pointer-events: none;
  width: 100%;
}

.container-center-horizontal>* {
  flex-shrink: 0;
  pointer-events: auto;
}

.auto-animated div {
  --z-index: -1;
  opacity: 0;
  position: absolute;
}

.auto-animated input {
  --z-index: -1;
  opacity: 0;
  position: absolute;
}

.auto-animated .container-center-vertical,
.auto-animated .container-center-horizontal {
  opacity: 1;
}

.overlay {
  display: none;
  height: 100%;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.overlay.animate-appear {
  animation: reveal 0.3s ease-in-out 1 normal forwards;
  display: block;
  opacity: 0;
}

.overlay.animate-disappear {
  animation: reveal 0.3s ease-in-out 1 reverse forwards;
  display: block;
  opacity: 1;
  pointer-events: none;
}

.overlay.animate-disappear * {
  pointer-events: none;
}

@keyframes reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-nodelay {
  animation-delay: 0s;
}

.align-self-flex-start {
  align-self: flex-start;
}

.align-self-flex-end {
  align-self: flex-end;
}

.align-self-flex-center {
  align-self: flex-center;
}

.valign-text-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.valign-text-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

input:focus {
  outline: none;
}

.hidden,
.hidden * {
  pointer-events: none;
  visibility: hidden;
}

* {
  box-sizing: border-box;
}

:root {
  --asparagus: #8a9f6b;
  --asparagus-2: #8a9f6b9c;
  --athens-gray: #e9e9f2;
  --black: #000000;
  --bombay: #b5b7b9;
  --cararra: #ebebeb;
  --grain-brown: #e4c8b7;
  --gravel: #4b4b4b;
  --gray: #8181811a;
  --gray-2: #80808021;
  --mist-gray: #c4c4c4;
  --rodeo-dust: #ccb2a2;
  --shady-lady: #aaaaaa;
  --swirl: #d3cbcb;
  --white: #ffffff;

  --font-size-l: 20px;
  --font-size-m: 18px;
  --font-size-s: 12px;
  --font-size-xl: 30px;
  --font-size-xxl: 40px;
  --font-size-xxxl: 50px;
  --font-size-xxxxl: 100px;

  --font-family-arbutus_slab: "Arbutus Slab", Helvetica;
  --font-family-mulish: "Mulish", Helvetica;
}

.arbutusslab-normal-rodeo-dust-18px {
  color: var(--rodeo-dust);
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.arbutusslab-normal-gravel-20px {
  color: var(--gravel);
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.arbutusslab-normal-shady-lady-18px {
  color: var(--shady-lady);
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.arbutusslab-normal-shady-lady-20px {
  color: var(--shady-lady);
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.arbutusslab-normal-mist-gray-18px {
  color: var(--mist-gray);
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.mulish-normal-bombay-12px {
  color: var(--bombay);
  font-family: var(--font-family-mulish);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.arbutusslab-normal-white-20px {
  color: var(--white);
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.arbutusslab-normal-asparagus-20px {
  color: var(--asparagus);
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.arbutusslab-normal-rodeo-dust-40px {
  color: var(--rodeo-dust);
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
}

.arbutusslab-normal-white-40px {
  color: var(--white);
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
}

.arbutusslab-normal-swirl-40px {
  color: var(--swirl);
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
}

.border-1px-athens-gray {
  border: 1px solid var(--athens-gray);
}

/* screen - o-nama */

.o-nama {
  background-color: var(--white);
  height: 3246px;
  mix-blend-mode: normal;
  overflow-x: hidden;
  position: relative;
  width: 1440px;
}

.o-nama .group-28-dxTtSa {
  background-color: transparent;
  height: 440px;
  left: 0px;
  position: absolute;
  top: 267px;
  width: 1440px;
}

.o-nama .rectangle-1-NGurhL {
  background-color: var(--asparagus-2);
  height: 440px;
  left: 0px;
  mix-blend-mode: normal;
  position: relative;
  top: 0px;
  width: 1440px;
}

.o-nama .logo-2-0Qg6Od {
  background-color: transparent;
  height: 303px;
  left: 283px;
  mix-blend-mode: normal;
  object-fit: cover;
  position: absolute;
  top: 335px;
  width: 873px;
}

.o-nama .group-21-h1CoXI {
  background-color: transparent;
  height: 328px;
  left: 0px;
  position: absolute;
  top: 2918px;
  width: 1442px;
}

.o-nama .rectangle-2-xAjFGM {
  background-color: var(--rodeo-dust);
  height: 328px;
  left: 0px;
  mix-blend-mode: normal;
  position: absolute;
  top: 0px;
  width: 1440px;
}

.o-nama .diviteagmailcom-033-123-456-xAjFGM {
  background-color: transparent;
  height: auto;
  left: 606px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 99px;
  width: 228px;
}

.o-nama .o-nama-h1CoXI {
  background-color: transparent;
  height: 28px;
  left: 437px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  text-decoration: underline;
  top: 113px;
  width: 79px;
}

.o-nama .novo-h1CoXI {
  background-color: transparent;
  cursor: pointer;
  height: 28px;
  left: 568px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  text-decoration: underline;
  top: 113px;
  width: 57px;
}

.o-nama .snieno-h1CoXI {
  background-color: transparent;
  cursor: pointer;
  height: 28px;
  left: 677px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  text-decoration: underline;
  top: 113px;
  width: 87px;
}

.o-nama .proizvodi-h1CoXI {
  background-color: transparent;
  cursor: pointer;
  height: 28px;
  left: 816px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  text-decoration: underline;
  top: 113px;
  width: 99px;
}

.o-nama .kontakt-h1CoXI {
  background-color: transparent;
  cursor: pointer;
  height: 28px;
  left: 967px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  text-decoration: underline;
  top: 113px;
  width: 81px;
}

.o-nama .group-25-h1CoXI {
  background-color: transparent;
  height: 90px;
  left: 60px;
  position: absolute;
  top: 880px;
  width: 594px;
}

.o-nama .naa-misija-3kxha2 {
  background-color: transparent;
  color: var(--grain-brown);
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 139px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 0px;
  width: 309px;
}

.o-nama .line-1-3kxha2 {
  background-color: transparent;
  height: 1px;
  position: absolute;
  top: 90px;
  width: 592px;
}

.o-nama .group-26-h1CoXI {
  background-color: transparent;
  height: 90px;
  left: 788px;
  position: absolute;
  top: 880px;
  width: 594px;
}

.o-nama .naa-vizija-K1mJ1I {
  background-color: transparent;
  color: var(--grain-brown);
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 139px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 0px;
  width: 309px;
}

.o-nama .line-1-K1mJ1I {
  background-color: transparent;
  height: 1px;
  position: absolute;
  top: 90px;
  width: 592px;
}

.o-nama .stvoriti-visoko-kval-h1CoXI {
  background-color: transparent;
  height: auto;
  left: 82px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 1003px;
  width: 570px;
}

.o-nama .biti-mjesto-broj-jed-h1CoXI {
  background-color: transparent;
  height: auto;
  left: 788px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 1003px;
  width: 592px;
}

.o-nama .group-25-KyBcQR {
  background-color: transparent;
  height: 143px;
  left: 0px;
  position: absolute;
  top: 1300px;
  width: 1442px;
}

.o-nama .rectangle-1-1uPG6p {
  background-color: var(--asparagus-2);
  height: 143px;
  left: 0px;
  mix-blend-mode: normal;
  position: absolute;
  top: 0px;
  width: 1440px;
}

.o-nama .okusi-prirodno-i-fino-1uPG6p {
  background-color: transparent;
  height: 91px;
  left: 123px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 26px;
  width: 1200px;
}

.o-nama .group-26-KyBcQR {
  background-color: transparent;
  height: 221px;
  left: 0px;
  position: absolute;
  top: 1838px;
  width: 1440px;
}

.o-nama .rectangle-2-l9KzRT {
  background-color: var(--gray);
  height: 221px;
  left: 0px;
  mix-blend-mode: normal;
  position: relative;
  top: 0px;
  width: 1440px;
}

.o-nama .slika8-1-h1CoXI {
  background-color: transparent;
  height: 312px;
  left: 60px;
  mix-blend-mode: normal;
  object-fit: cover;
  position: absolute;
  top: 1623px;
  width: 312px;
}

.o-nama .slika5-1-h1CoXI {
  background-color: transparent;
  height: 312px;
  left: 311px;
  mix-blend-mode: normal;
  object-fit: cover;
  position: absolute;
  top: 1838px;
  width: 312px;
}

.o-nama .to-nas-ini-h1CoXI {
  background-color: transparent;
  color: #808080;
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 487px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 1716px;
  width: 394px;
}

.o-nama .drukijima-h1CoXI {
  background-color: transparent;
  color: var(--grain-brown);
  font-family: var(--font-family-arbutus_slab);
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 836px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 1706px;
  width: 328px;
}

.o-nama .tritu-nudimo-samo-pa-h1CoXI {
  background-color: transparent;
  color: transparent;
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 693px;
  letter-spacing: 0px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 1866px;
  width: 660px;
}

.o-nama .span0-nouroh {
  font-style: normal;
}

.o-nama .span1-nouroh {
  font-style: normal;
}

.o-nama .group-27-h1CoXI {
  background-color: transparent;
  height: 80px;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 1440px;
}

.o-nama .rectangle-1-Pfz7oY {
  background-color: var(--rodeo-dust);
  height: 80px;
  left: 0px;
  mix-blend-mode: normal;
  position: absolute;
  top: 0px;
  width: 1440px;
}

.o-nama .search-field-Pfz7oY {
  background-color: var(--cararra);
  border-radius: 54px;
  height: 36px;
  left: 1027px;
  mix-blend-mode: normal;
  position: absolute;
  top: 22px;
  width: 261px;
}

.o-nama .icon-outlined-search-QZpKba {
  background-color: transparent;
  height: 16px;
  left: 18px;
  mix-blend-mode: normal;
  position: absolute;
  top: 10px;
  width: 16px;
}

.o-nama .search-QZpKba {
  background-color: transparent;
  border: 0;
  height: 16px;
  left: 43px;
  letter-spacing: 0px;
  line-height: 22px;
  mix-blend-mode: normal;
  padding: 0;
  position: absolute;
  resize: none;
  text-align: left;
  top: 9px;
  white-space: nowrap;
  width: 122px;
}

.o-nama .search-QZpKba::placeholder {
  color: #b5b7b999;
}

.o-nama .logo-1-Pfz7oY {
  background-color: transparent;
  cursor: pointer;
  height: 34px;
  left: 30px;
  mix-blend-mode: normal;
  object-fit: cover;
  position: absolute;
  top: 23px;
  width: 98px;
}

.o-nama .shopping-bag-Pfz7oY {
  background-color: transparent;
  cursor: pointer;
  height: 30px;
  left: 1361px;
  mix-blend-mode: normal;
  position: absolute;
  top: 25px;
  width: 30px;
}

.o-nama .hand-drawn-heart-Pfz7oY {
  background-color: transparent;
  cursor: pointer;
  height: 30px;
  left: 1318px;
  mix-blend-mode: normal;
  position: absolute;
  top: 25px;
  width: 30px;
}

.o-nama .na-fokus-je-zdravo-i-h1CoXI {
  background-color: transparent;
  color: var(--asparagus-2);
  font-family: var(--font-family-arbutus_slab);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 238px;
  letter-spacing: 0px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 2369px;
  width: 964px;
}

.o-nama .line-1-h1CoXI {
  background-color: transparent;
  height: 1px;
  left: 174px;
  position: absolute;
  top: 2689px;
  width: 1092px;
}

.o-nama .line-2-h1CoXI {
  background-color: transparent;
  height: 1px;
  left: 174px;
  position: absolute;
  top: 2317px;
  width: 1092px;
}

.o-nama .facebook-h1CoXI {
  background-color: transparent;
  height: 30px;
  left: 685px;
  mix-blend-mode: normal;
  position: absolute;
  top: 3107px;
  width: 30px;
}

.o-nama .instagram-circle-h1CoXI {
  background-color: transparent;
  height: 30px;
  left: 725px;
  mix-blend-mode: normal;
  position: absolute;
  top: 3107px;
  width: 30px;
}

/* ACTION LINKS */

#anima-interface {
  transition: all 0.5s ease-in-out;
}

.link.navigation {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 32px;
  color: #fff;
  font-size: 12px;
  cursor: default;
  padding: 0 5px;
}

.link.navigation .icon {
  margin: 0 6px;
  fill: none;
  stroke: currentColor;
  cursor: pointer;
}

.link.navigation .icon.disabled {
  opacity: 0.5;
  cursor: default;
}

.link.navigation .home-icon {
  margin-left: 6px;
  fill: currentColor;
  stroke: currentColor;
  cursor: pointer;
}

.omniview-anima-action-links>*+* {
  margin-right: 0;
  margin-left: 10px;
}

.idle {
  opacity: 0;
  pointer-events: none;
}

#popoverOpener {
  position: absolute;
  left: 50%;
  margin-left: -10vw;
  text-align: center;
  top: 45vh;
  width: 20vw;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  font-family: "sans-serif";
  font-size: 14px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.popover.top {
  margin-top: -12px;
}

.popover.right {
  margin-left: 10px;
}

.popover.bottom {
  margin-top: 10px;
}

.popover.left {
  margin-left: -10px;
}

.popover-title {
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0;
}

.popover-content {
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
  font-family: Mulish, sans-serif;
}

.popover>.arrow,
.popover>.arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.popover>.arrow {
  border-width: 11px;
}

.popover>.arrow:after {
  content: "";
  border-width: 10px;
}

.popover.top>.arrow {
  bottom: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-color: #999;
  border-top-color: rgba(0, 0, 0, 0.25);
  border-bottom-width: 0;
}

.popover.top>.arrow:after {
  bottom: 1px;
  margin-left: -10px;
  content: " ";
  border-top-color: #fff;
  border-bottom-width: 0;
}

.popover.right>.arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-right-color: #999;
  border-right-color: rgba(0, 0, 0, 0.25);
  border-left-width: 0;
}

.popover.right>.arrow:after {
  bottom: -10px;
  left: 1px;
  content: " ";
  border-right-color: #fff;
  border-left-width: 0;
}

.popover.bottom>.arrow {
  top: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #999;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}

.popover.bottom>.arrow:after {
  top: 1px;
  margin-left: -10px;
  content: " ";
  border-top-width: 0;
  border-bottom-color: #fff;
}

.popover.left>.arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: #999;
  border-left-color: rgba(0, 0, 0, 0.25);
}

.popover.left>.arrow:after {
  right: 1px;
  bottom: -10px;
  content: " ";
  border-right-width: 0;
  border-left-color: #fff;
}

.box-highlight.is_root_screen .tag-box {
  background: transparent;
  top: 3px;
  left: 0;
}

.is_component .tag-component-name {
  color: #e2412e;
  background: #f2bfaf;
}

.is_component .tag-name {
  background: #ff6250;
  color: #fff;
}